<template>
  <div class="timetableDetailList" >
      <div v-if="timetableDetailList.length !=0">
        <div 
            class="timetableBox"
            v-for="(item,index) in timetableDetailList"
            :key="index">
            <div class="timetableBoxPic">
                <img :src="item.timetablePic" alt="">
                <span class="timetableClassification">{{item.timetableClassification}}</span>
            </div>
            <div class="boxInfo">
               <div class="plan_course_info">
                   <p class="fz-20">{{item.timetableName}}</p>
                   <p class="fz-16">已学至 {{item.timetableProgressCatalogue}}</p>
                   <p class="c-r">已学 {{item.timetableProgress}} 节</p>
               </div>
               <div>
                   <p class="plan_upload_chapter">{{item.timetable}}</p>
                   <button>开始学习</button>
               </div>
                <div>
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
        </div>
      </div>
      <div v-else class="noData">
          <p>暂时还没有数据哦~</p>
      </div>

    </div>
</template>

<script>
export default {
    data() {
        return {

            
        }
    },
    props:['timetableDetailList']
}
</script>

<style>
@import url('../assets/css/timetableDetailList.css');
</style>